<template lang="html">
  <div class="app">
    <top-header :isActAct='isActAct' />
    <div class="w1200">
      <div class="actDetail">
        <div class="actDetail-topInfo overhide">
          <img v-lazy="json.img" alt="" class="fl act-img">
          <div class="font fl">
            <div class="tit">{{json.tit}}</div>
            <div class="park">
              <span class="parkLogo ver-middle">
                <!-- <img v-lazy="item.logo" alt=""> -->
              </span>
              {{json.parkname}}
            </div>
            <div class="time">
              <span>时间：</span>{{json.time}}
            </div>
            <div class="pos">
              <span>地点：</span>{{json.pos}}
            </div>
            <div class="price">
              <span>价格：</span><span class="fee" v-if='json.isFree'>{{json.price}}</span><span class="fee" v-else>{{json.price}}元 起</span>
            </div>
            <div class="num">
              <span>人数限额：</span>{{json.num}}
            </div>
          </div>
          <div class="code2">
            <img src="../../assets/images/xgcode.png" alt="">
          </div>
        </div>
      </div>
      <div class="actDetail-botCon overhide actCommon">
        <div class="left fl">
          <div class="tit">
            <span>活动详情</span>
          </div>
          <div class="content">
            <p>公司发展的不同阶段，</p>
            <p>创业者都会面临许多公司股权架构设计的问题。</p>
            <p>合伙创业，虽然感情深厚，</p>
            <p>但是股权架构如果设计不好，便会赔了夫人又折兵！</p>
            <p>合伙人股权架构设计如何操作？有哪些原则？</p>
            <p>合伙人股权的进入和退出机制如何设计？</p>
            <p>合伙人股权进入有哪些经验和避免踩上哪些坑？</p>
            <p>合伙人离婚了，股权应该怎么办？</p>
            <p>问题很多，也另许多创业者头痛不已。</p>
            <p><img v-lazy="json.img" alt=""></p>
            <p><b>活动流程</b></p>
            <p>我们邀请犀牛法律金牌律师郭召道律师，</p>
            <p>与大家一同分析合伙人股权设计的原则。</p>
            <p>不仅让创业者的业务顺利开展，</p>
            <p>也让友谊的小船，万年航行。</p>
            <p><b>活动时间</b></p>
            <p>{{json.time}}</p>
            <p><b>活动地点</b></p>
            <p>{{json.pos}}</p>
            <p><b>导师介绍</b></p>
            <p class="intro">郭召道律师  2000年通过全国律师资格统一考试，已经执业十余年，并于2004年通过了专利代理人资格考试，成为专律双证律师。熟悉企业商业秘密和技术秘密的保护和管理，并精通法律层面的操作流程，熟悉商标和域名纠纷。</p>
          </div>
        </div>
        <div class="right fr">
          <div class="apply">
            你想要报名参加活动吗？
            <el-button type="text" @click="dialogVisible = true" class="btn applyBtn fr">立即报名</el-button>
          </div>
          <el-dialog
            :visible.sync="dialogVisible"
            size="tiny"
            :before-close="handleClose">
            <div class="dia-con">
              <div class="dia-tit">
                立即报名
              </div>
              <ul class="overhide">
                <li>
                  <i class="icon man ver-middle"></i>
                  <input type="text" placeholder="联系人">
                </li>
                <li>
                  <i class="icon tel ver-middle"></i>
                  <input type="text" placeholder="联系电话">
                </li>
                <li>
                  <i class="icon pos ver-middle"></i>
                  <input type="text" placeholder="公司职务">
                </li>
                <li>
                  <i class="icon company ver-middle"></i>
                  <input type="text" placeholder="公司名称">
                </li>
              </ul>
              <el-button type="warning" class="sub-btn">提 交</el-button>
            </div>
          </el-dialog>
          <div class="interest right-act">
            <div class="tit">
              这些活动你可能感兴趣！
              <ul>
                <router-link to='#' v-for='(item,index) in this.$store.state.activity.acts' key="tit" v-if='index<2'>
                  <li>
                    <div class="imgBox">
                      <img v-lazy="item.img" alt="">
                    </div>
                    <div class="info">
                      <div class="tit">{{item.tit}}</div>
                      <div class="time">
                        <i class="icon time ver-middle"></i>时间：{{item.time}}
                        <span class="price fr" v-if='item.isFree'>{{item.price}}</span>
                        <span class="price fr" v-else><em>{{item.price}}</em>元 起</span>
                      </div>
                      <div class="pos">
                        <i class="icon pos ver-middle"></i>地点：{{item.pos}}
                      </div>
                      <div class="num">
                        <i class="icon numL ver-middle"></i>人数限额：{{item.num}}
                      </div>
                      <div class="park">
                        <span class="parkLogo ver-middle">
                          <!-- <img v-lazy="item.logo" alt=""> -->
                        </span>
                        {{item.parkname}}
                      </div>
                    </div>
                  </li>
                </router-link>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <bot-footer/>
  </div>
</template>

<script>
import header from '../header/header.vue';
import footer from '../footer/footer.vue';
export default {
  data(){
    return{
      isActAct:true,
      actDetailColor:true,
      json:{},
      isFree:true,
      dialogVisible: false
    }
  },
  methods:{
    getJson:function(){
      let id = this.$route.params.id;
      let json = this.$store.state.activity.acts[id];
      this.json = json;
    },
    // 弹窗
    handleClose(done) {
      done();
    }
  },
  mounted(){
    this.$nextTick(() => {
      this.getJson(),
      document.title = '解忧工场-活动详情'
    })
  },
  components:{
    'top-header':header,
    'bot-footer':footer
  }
}
</script>

<style lang="less">
  @import "activity.less";
</style>
